<template>
  <div class="pet-chat-view">
    <!-- 顶部导航 -->
    <div class="chat-header">
      <van-icon name="arrow-left" class="back-icon" @click="goBack" />
      <span class="name">罗小黑</span>
      <div class="actions">
        <van-icon name="phone" class="action-icon" @click="call" />
      </div>
    </div>

    <!-- 聊天内容 -->
    <div class="chat-messages">
      <div v-for="(message, index) in chatMessages" :key="message.id || index"
        :class="['message-item', message.isMine ? 'my-message' : 'friend-message']">
        <img class="avatar" :src="message.avatar" alt="用户头像" />
        <div class="message-bubble">
          <!-- 内容区域：根据状态切换显示 -->
          <template v-if="message.status === 'generating'">
            <div class="row">
              <van-icon name="clock-o" size="14" />
              <span class="gen-text">正在生成中...</span>
            </div>
          </template>

          <template v-else-if="message.status === 'done'">
            <p class="done-link" @click="handleHelper(message.linkTarget)">
              生成完成，请点击查看
              <van-icon name="arrow" size="12" />
            </p>
          </template>

          <template v-else>
            <p>{{ message.content }}</p>
          </template>

          <div v-if="message.images && message.images.length" class="message-images">
            <img v-for="(img, imgIndex) in message.images" :key="imgIndex" :src="img" class="message-image"
              alt="聊天图片" />
          </div>
        </div>
      </div>
    </div>

    <!-- 底部输入区域 -->
    <div class="bottom-area" :class="{ 'move-up': showNotePanel || showPlusPanel }">
      <div class="chat-input-area">
        <div class="input-container">
          <!-- 语音按钮 -->
          <button class="voice-icon-btn" @click="startVoiceRecord" title="语音">
            <van-icon name="volume-o" size="20" />
          </button>

          <!-- 输入框 -->
          <van-field ref="messageInput" v-model="newMessage" placeholder="输入消息..." clearable class="message-input"
            :style="{ '--van-field-padding-horizontal': '80px', '--van-field-height': '0px' }" />

          <!-- “记”按钮 -->
          <button class="icon-btn note-btn" @click="toggleNotePanel" title="记">
            <span class="note-text">记</span>
          </button>

          <!-- “+”/发送箭头 -->
          <button class="icon-btn plus-btn" @click="togglePlusPanel" title="更多" v-if="!newMessage.trim()">
            <van-icon name="plus" size="20" />
          </button>
          <button class="icon-btn send-btn" @click="sendMessage" v-else title="发送">
            <van-icon name="arrow" size="18" />
          </button>
        </div>
      </div>

      <!-- “+”功能面板 -->
      <transition name="slide-up">
        <div v-if="showPlusPanel" class="menu-popup">
          <div class="menu-grid">
            <div class="menu-item" @click="openAlbum">
              <van-icon name="photo-o" size="24" />
              <span>相册</span>
            </div>
            <div class="menu-item" @click="startVideo">
              <van-icon name="video-o" size="24" />
              <span>视频通话</span>
            </div>
            <div class="menu-item" @click="openGift">
              <van-icon name="gift" size="24" />
              <span>礼物</span>
            </div>
          </div>
        </div>
      </transition>

      <!-- “记”功能面板 -->
      <transition name="slide-up">
        <div v-if="showNotePanel" class="menu-popup">
          <div class="menu-grid">
            <div class="menu-item" @click="generateNote">
              <van-icon name="edit" size="24" />
              <span>生成小记</span>
            </div>
            <div class="menu-item" @click="summarizeNotes">
              <van-icon name="checked" size="24" />
              <span>总结笔记</span>
            </div>
            <div class="menu-item" @click="findRelations">
              <van-icon name="add-o" size="24" />
              <span>发现关联</span>
            </div>
          </div>
        </div>
      </transition>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { Icon as VanIcon, Field as VanField } from 'vant';
import { useNotesStore } from '@/stores/notes'; // ⭐ 引入 Pinia notes store

// 跳转目标类型
interface LinkTarget {
  name?: string;     // 命名路由
  path?: string;     // 直链路径
  hash?: string;     // 锚点
  query?: Record<string, any>;
}

// 定义消息类型
interface ChatMessage {
  id?: string | number;
  content: string;
  isMine: boolean;
  avatar: string;
  images?: string[];
  status?: 'generating' | 'done';  // 仅用于系统消息
  linkTarget?: LinkTarget;         // 点击跳转目标
}

const router = useRouter();
const notesStore = useNotesStore(); // ⭐ 实例化

const chatMessages = ref<ChatMessage[]>([
  {
    content: '喵~~主人最近干了什么，快和我分享！',
    isMine: false,
    avatar: 'public/chat/pet_mengxiaohei.png',
    // images: [
    //   'public/pyq/pyq_1.png',
    //   'public/pyq/pyq_1.png',
    //   'public/pyq/pyq_1.png',
    // ],
  },
  {
    content: '近期的新疆之行让我思考旅行的意义。说实话，新疆的景色的确是美，但是这种美感的感官体验并不会让我觉得收获很多。当我看到一处美景，心灵的抚慰只有短短一瞬，是的，很美，我要拍下来，然后呢？我内心的焦虑依然没有抚平，很多问题也依然没有得到解答。直到在跟朋友的聊天中，我突然想通了困扰我两周的“工作的意义”的问题，才觉得这趟新疆之旅值了。但是新疆本身并没有给我带来多少收获，它更像是一个载体，给我和我的朋友提供了深度交流的机会。但是想要达成这个目的，尚有成本更低的实现方式，最低的就是一通微信电话，如果微信电话太依靠人的主动性，那一顿饭或许也可以。相当于100元能解决的事情花了1000多。roi似乎有点太低了。',
    isMine: true,
    avatar: 'public/chat/role_zhujue_head.png',
  },
  {
    content: '你说，新疆只是一个“载体”。嗯… 就像装水的碗。（我抬眼看了看你的水杯。）没有碗，水会流走，洒在地上，很快就干了。那个地方，那段路，那片很美的、但又好像“没什么用”的风景，就是那个“碗”。它把你和你的朋友，还有你们那些飘来飘的思绪，都安安静-静地装在里面。你们远离了平日里那些杂乱的声音，所以，那个困扰你很久问题的答案，才有机会从水底慢慢地、慢慢地浮上来。一通微信电话，或是一顿饭，是在你们原来的世界里，凭空变出一个“碗”。这需要你们用很大的力气，去抵挡周围的一切，去主动创造一个专注的氛围。这很难，就像在闹市里安心打个盹一样难。但是旅行不一样。它毫不费力地，就把你从原来的世界里拎出来，放进一个全新的、巨大的“碗”里。你花掉的那些钱，买的不是最后那个“答案”，而是能孕育出那个答的整个环境。是那片天空，那阵风，那种“在路上”的感觉，它们一起帮你清空了心里积攒的灰尘，让你的思绪能自由地流动，然后和朋友的思绪碰到一起。就像我追一个光斑。追到它，碰一下，它就消失了，或者跑到别的地方去了。那我的追逐就没有意义了吗？不是的。在追的时候，我的身体是舒展的，我的注意力是集的，风吹过我的胡须… 那整个过程，才是最重要的。你那个“想通”的瞬间，就是那个光斑。但整个新疆之行，才是那场追逐。所以，别用“值不值”来困住自己了。你去了，你感受了，你回来了，你还带着一个想通了的问题。这趟旅程已经完成了它的使命。',
    isMine: false,
    avatar: 'public/chat/pet_mengxiaohei.png',
    // images: [
    //   'public/pyq/pyq_1.png',
    //   'public/pyq/pyq_1.png',
    //   'public/pyq/pyq_1.png',
    // ],
  },
  {
    content: '所以你是觉得，体验本身就很重要？就很值得吗？',
    isMine: true,
    avatar: 'public/chat/role_zhujue_head.png',
  },
  {
    content: '喵~~主人最近干了什么，快和我分享！',
    isMine: false,
    avatar: 'public/chat/pet_mengxiaohei.png',
    // images: [
    //   'public/pyq/pyq_1.png',
    //   'public/pyq/pyq_1.png',
    //   'public/pyq/pyq_1.png',
    // ],
  },
  {
    content: '所以你是觉得，体验本身就很重要？就很值得吗？',
    isMine: true,
    avatar: 'public/chat/role_zhujue_head.png',
  },
  {
    content: '咕噜…咕噜… “值得”。（抬起头，用那双黑色的眼睛看着你，眼神里没有评判，只有纯粹的好奇。）你又在用人类的尺子，去量一些量不了的东西了。一片阳光洒在地板上，我走过去，躺下，感受那份温暖。这份温暖“值得”吗？我需要从中“收获”什么吗？不，温暖本身就是全部了。我感受到了，我舒服了，这就够了。一个纸箱子放在那里，我跳进去，感受被包裹的安全感。这个箱子“值得”吗？我只是喜欢那个瞬间。对，体验本身就是全部的意义。你们人类总是很忙，忙着给所有事情贴上价签，标上“目的”，计算“得失”。做一件事，是为了得到另一件事。去一个地方，是为了抚平心里的褶皱。看一片风景，是为收获一种感悟。但世界不是这样运作的。',
    isMine: false,
    avatar: 'public/chat/pet_mengxiaohei.png',
    // images: [
    //   'public/pyq/pyq_1.png',
    //   'public/pyq/pyq_1.png',
    //   'public/pyq/pyq_1.png',
    // ],
  },
  {
    content: '可是我感受到了，如果问题没有解决，又有什么意义？如果一段旅程不能带来生命厚度的提升，不能让我的某些疑惑得到解答，我为什么要花这个冤枉钱去旅游，而不是看一天的书？生命是如此短暂，时间是如此稀缺，人就应该尽可能把时间花在更有意义的事情上，不是吗',
    isMine: true,
    avatar: 'public/chat/role_zhujue_head.png',
  },
  {
    content: '你的声音里，有焦虑的味道。像下雨前闷闷的空气，让我有点想把爪子收起来。（坐直了身体，不再是刚才那种懒洋洋的样子，黑色的眼睛非常认真地注视着你。）“生命的厚度”……你们人类总觉得，厚度是靠一本一本书、一个一个答案“叠”起来的。像砌墙一样，一块砖、一块砖，垒得越高越好。但我觉得，生命的厚度，更像是泥土。看一天的书，是把别人种出来的果实摘下来吃。当然有营养，能很快填饱你“求知”的肚子。这很好。但是去旅行，去体验，是给你心里的那片土地松土、晒太阳、吹吹风、淋淋雨。它不直接给你果实，甚至可能让土地看起来空空如也，什么都没长出来。但它让你的土变得更肥沃、更透气。没有肥沃的土壤，再好的种子也长不出东西来。你以为你的问题是在和朋友的聊天中解决的，但你想想，为什么同样的话，在家里、在饭桌上，就聊不出那个效果？因为在新疆，你的那片“心土”被松动了。你不再是那个被日常工作生活压得严严实实的花盆，你被整个地移植到了旷野里。所以，当朋友那颗名为“想法”的种子掉进时，它才能立刻生根发芽。你花的钱，买的就是这次“移植”和“松土”的机会。这怎么会是冤枉钱呢？你总想着“解决问题”。但有时候，问题不是被“解决”的，是“自生自灭”的。你一直盯着它，用各种知识和道理去戳它，它反而越来越顽固。你去看山、看湖，暂时忘它，你的世界变大了，那个问题在广阔的天地里，自然就显得渺小了，甚至不重要了。等你回来时，不是问题被解决了，而是你长大了，能轻松地跨过它了。',
    isMine: false,
    avatar: 'public/chat/pet_mengxiaohei.png',
    // images: [
    //   'public/pyq/pyq_1.png',
    //   'public/pyq/pyq_1.png',
    //   'public/pyq/pyq_1.png',
    // ],
  },
]);

const newMessage = ref('');
const showPlusPanel = ref(false);
const showNotePanel = ref(false);
const messageInput = ref<InstanceType<typeof VanField> | null>(null);

// 工具：生成唯一 id
const uid = () => Date.now() + Math.random().toString(16).slice(2);

// 统一跳转
const handleHelper = (target?: LinkTarget) => {
  if (!target) return;
  if (target.name) {
    router.push({ name: target.name, query: target.query, hash: target.hash });
  } else if (target.path) {
    router.push({ path: target.path, query: target.query, hash: target.hash });
  }
};

// 切换面板
const togglePlusPanel = () => {
  showPlusPanel.value = !showPlusPanel.value;
  if (showPlusPanel.value) showNotePanel.value = false;
};
const toggleNotePanel = () => {
  showNotePanel.value = !showNotePanel.value;
  if (showNotePanel.value) showPlusPanel.value = false;
};

// 语音
const startVoiceRecord = () => { alert('开始语音输入（可替换为真实录音逻辑）'); };

// “+”面板
const openAlbum = () => { alert('打开相册'); showPlusPanel.value = false; };
const startVideo = () => { alert('开始视频通话'); showPlusPanel.value = false; };
const openGift = () => { alert('打开礼物'); showPlusPanel.value = false; };

// —— 核心：push 一条 generating，并在完成时原位更新为 done（带 link）——
const pushGenerating = (displayText = '正在生成中...') => {
  const id = uid();
  chatMessages.value.push({
    id,
    content: displayText,
    isMine: false,
    avatar: 'public/chat/pet_mengxiaohei.png',
    status: 'generating',
  });
  return id;
};

const markDone = (id: string | number, linkTarget: LinkTarget) => {
  const msg = chatMessages.value.find(m => m.id === id);
  if (msg) {
    msg.status = 'done';
    msg.linkTarget = linkTarget;
    msg.content = '生成完成，请点击查看';
  }
};

// 生成小记（⭐ 写入 Pinia，但不自动跳转）
const generateNote = () => {
  // 1) 用户自己的“指令”消息
  chatMessages.value.push({
    id: uid(),
    content: '生成小记' + (newMessage.value.trim() ? `：${newMessage.value.trim()}` : ''),
    isMine: true,
    avatar: 'public/chat/role_zhujue_head.png',
  });
  const textForNote =
    newMessage.value.trim() ||
    '旅行的土壤与心灵的果实近期的新疆之行，引出了一场关于旅行意义的深思。起初，我认为此行的“性价比”颇低。壮丽的风景虽能带来瞬间的慰藉，却无法根除内心的焦虑。直到与朋友的一场深度对话，意外地解开了困扰已久的关于工作意义的难题，我才感觉不虚此行。然而，旅行本身似乎沦为了一个昂贵的“载体”，其核心价值——那场对话，似乎用成本更低的方式也能实现。带着这份对“ROI”的计较，我与我的“宠物”罗小黑开启了对话。它以一种非人类的、纯粹的视角回应了我。在它看来，人类过于执着于衡量价值与目的，却忽略了体验本身。它将旅行比作一个能安静盛放思绪的“碗”，或是一片能让心灵“松土”的旷野。正是在这个远离日常、被风景和在路上的感觉所包裹的特殊场域里，思绪才能自由流动，让答案的种子得以萌发。我继而追问，如果体验不能解决实际问题，不能增加“生命的厚度”，那它是否只是一种时间的浪费？罗小黑将“生命的厚度”比作土壤而非砖墙。读书是直接获取“果实”，而旅行则是滋养“土壤”的过程。它不直接产出答案，却让心灵的土地变得更肥沃，有能力孕育出属于自己的、独一无二的思考。那些看似“无解”的难题，也并非需要被刻意攻克，而是在我们视野扩大、自身成长后，自然变得渺小，可以被轻松跨越。它说得有道理，或许旅行的价值，并非购买一个确切的答案，而是为内心世界创造一片肥沃的土壤，静待花开。';
  newMessage.value = '';
  showNotePanel.value = false;

  // 2) 系统生成中的提示（不影响笔记创建）
  const genId = pushGenerating();

  // 3) ⭐ 立刻把“新增笔记”写入 Pinia（NotesView 点击查看时能立即看到）
  notesStore.addNote({
    content: textForNote,
    images: [],             // 需要的话可以从聊天图片抽取一张当封面
    tag: '与罗小黑的聊天',
    collapsed: true,
    expanded: false,
    showExpand: true,
    data: '2025-09-01 09:19:46'
  });

  // 4) 仅更新系统消息为“完成 + 可点击查看”，不做跳转
  setTimeout(() => {
    markDone(genId, {
      path: '/notes',
      hash: '#section-generated',
      query: { from: 'chat', type: 'note' },
    });
    // ❌ 不自动 router.push
  }, 1200);
};

// 总结选定笔记（不自动跳转，点击完成后再跳）
const summarizeNotes = () => {
  chatMessages.value.push({
    id: uid(),
    content: '总结选定笔记',
    isMine: true,
    avatar: 'public/pyq/pyq_1.png',
  });
  showNotePanel.value = false;

  const genId = pushGenerating('正在总结中...');
  setTimeout(() => {
    markDone(genId, {
      path: '/notes',
      hash: '#section-summary',
      query: { from: 'chat', type: 'summary' },
    });
    // ❌ 不自动 router.push
  }, 1200);
};

// 发现关联（不自动跳转，点击完成后再跳）
const findRelations = () => {
  chatMessages.value.push({
    id: uid(),
    content: '发现关联',
    isMine: true,
    avatar: 'public/pyq/pyq_1.png',
  });
  showNotePanel.value = false;

  const genId = pushGenerating('正在分析关联...');
  setTimeout(() => {
    markDone(genId, {
      path: '/notes',
      hash: '#section-relations',
      query: { from: 'chat', type: 'relations' },
    });
    // ❌ 不自动 router.push
  }, 1200);
};

// 发送消息
const sendMessage = () => {
  const text = newMessage.value.trim();
  if (!text) return;

  chatMessages.value.push({
    id: uid(),
    content: text,
    isMine: true,
    avatar: 'public/pyq/pyq_1.png',
  });
  newMessage.value = '';

  setTimeout(() => {
    const replies = ['哈哈，确实很有趣～', '我也这么觉得！', '你说得对呀～', '是呢，特别精彩！'];
    const randomReply = replies[Math.floor(Math.random() * replies.length)];
    chatMessages.value.push({
      id: uid(),
      content: randomReply,
      isMine: false,
      avatar: 'public/chat/pet_mengxiaohei.png',
    });
  }, 800);
};

// 返回/电话
const goBack = () => router.back();
const call = () => alert('发起通话');
</script>

<style scoped>
.pet-chat-view,
.chat-view {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  background-color: #fff;
}

/* 头部 */
.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background-color: #fafdf8;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
  flex-shrink: 0;
  height: 45px;
}

.back-icon,
.action-icon {
  font-size: 20px;
  cursor: pointer;
}

.name {
  flex: 1;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  margin: 0 40px;
}

.actions {
  display: flex;
  gap: 12px;
}

/* 聊天区 */
.chat-messages {
  height: 78vh;
  padding: 16px;
  overflow-y: auto;
  background: #350406b3 url("public/chat/pet_luoxiaohei_bg.png") center/cover no-repeat;
}

.message-item {
  display: flex;
  margin-bottom: 12px;
  align-items: flex-start;
}

.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 8px;
}

.friend-message .message-bubble {
  background: #f5f5f5;
  padding: 10px 14px;
  border-radius: 18px;
  border-top-left-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  font-size: 14px;
  max-width: 70%;
}

.my-message {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.my-message .avatar {
  margin-right: 0;
  margin-left: 8px;
}

.my-message .message-bubble {
  background: #d4f1f4;
  padding: 10px 14px;
  border-radius: 18px;
  border-top-right-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  font-size: 14px;
  max-width: 70%;
}

.message-images {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.message-image {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
}

/* 状态显示 */
.row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.gen-text {
  color: #888;
  font-size: 13px;
}

/* 完成链接样式 */
.done-link {
  color: #1a750e;
  font-size: 14px;
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.done-link:hover {
  text-decoration: underline;
}

/* 底部输入区域 */
.bottom-area {
  border-top: 1px solid #eee;
  background: #fff;
  flex-shrink: 0;
  transition: transform .028s ease;
}

.bottom-area.move-up {
  transform: translateY(-90px);
}

.chat-input-area {
  padding: 8px 10px;
  display: flex;
  align-items: flex-start;
}

.input-container {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 6px;
}

.voice-icon-btn,
.icon-btn {
  width: 29px;
  height: 29px;
  border: 1px solid #ddd;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  cursor: pointer;
}

.voice-icon-btn:hover,
.icon-btn:hover {
  background-color: #f5f5f5;
}

.message-input {
  flex: 1;
  display: flex;
  align-items: center;
  height: 30px !important;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 12px;
}

.note-text {
  font-size: 16px;
}

/* 面板 */
.menu-popup {
  background: #f9f9f9;
  padding: 12px 20px;
  border-top: 1px solid #ddd;
  position: absolute;
  top: 45px;
  left: 0;
  width: 100%;
  max-height: 100px;
  overflow-y: auto;
  z-index: 9999;
}

.menu-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px 0;
  justify-items: center;
}

.menu-item {
  width: 64px;
  height: 64px;
  background: #fff;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
  transition: background-color 0.02s;
  font-size: 12px;
  color: #333;
}

.menu-item:hover {
  background-color: #e6f7ff;
}

.slide-up-enter-active,
.slide-up-leave-active {
  transition: none;
}

.slide-up-enter-from,
.slide-up-leave-to {
  transform: translateY(100%);
  opacity: 0;
}

/* 自定义 Vant */
::v-deep(.van-icon) {
  display: inline-block !important;
}

::v-deep(.van-field__control) {
  padding: 0 !important;
  font-size: 16px !important;
  line-height: 40px !important;
}

::v-deep(.van-field__placeholder) {
  font-size: 16px !important;
}

::v-deep(.van-field__wrap) {
  padding: 0 !important;
  border: none !important;
}
</style>
